<script setup>
import ChildenVue from '@/components/childen.vue'
import {reactive, ref,computed,watch} from 'vue'
import {useCounterStore}from '@/stores/counter'
// 声明变量用ref或reactive
//用reactive时，不需要用.value访问，用ref时需要
const num1=ref(10)
const num2=reactive({num:10})
const changeNum1=()=>{
    num1.value++
}
const list=reactive([{name:'张三',age:18},{name:'李四',age:20}])
// 计算属性
const result=computed(()=>{
    return list.length>0?'Yes':'No'
})
// 父子传值
const childenName=ref('1')
const fatherName=ref('1')
const submit=(value)=>{
  fatherName.value=value
}
// pinia的值
const store=useCounterStore()

// 监听器
watch(num1,(newValue,oldValue)=>{
  //num1:要监听的数据源
  //newValue:新值,oldValue:旧值
  console.log(newValue)
},
{deep:true,immediate:true,once:true}
//deep:是否深度监听,同vue2，immediate:是否一打开页面就执行,once:是否只监听一次   
//注：once属性在vue3.4版本才支持
)
</script>

<template>
    <div class="about">
      <h1>pinia的值: {{  store.count }}</h1>
      <h1>ref与reactive:</h1>
      <h1>num1: {{  num1 }}</h1>
      <h1>num2: {{  num2.num }}</h1>
      <button @click="changeNum1">改变num1</button>
      <button @click="num2.num++">改变num2</button>
    </div>
    <div>
      <h1>计算属性:</h1>
      <div>{{result}}</div>
    </div>
    <div>
      <h1>父子传值:</h1>
      <button @click="childenName='10'">修改子组件的值</button>
      <ChildenVue :value="childenName" @submit="submit"></ChildenVue>
       <div>父组件的值 : {{fatherName}}</div>
    </div>
  </template>
  
  <style>
  
  </style>
  